<template>
    <div id="edit-notice">
        <div class="button-bar">
            <el-button size="mini" @click="onBack">取消</el-button>
            <el-button type="primary" size="mini" @click="onSave">保存</el-button>
        </div>
        <el-form :inline="false" :model="formData" ref="formData" label-width="80px" :rules="validatorRules">
            <el-form-item label="标题" prop="title">
                <el-input v-model="formData.title" maxlength="20" placeholder="请输入标题(不超过20个字符)"></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="title">
                <div id="editor"></div>
            </el-form-item>
        </el-form> 
    </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
    props:{
        initData:{
            type:Object,
            default:{},
            require:false,
        }
    },
    data(){
        return{
            formData:{
                infoType:'',
                id:'',
                title:"",
                content:'',
                status:'',
            },
            editor:{},
            validatorRules:{
                title:[
                    {required: true, message: '请输入', trigger: 'change'},
                    {max:40, message: '输入字符不超过40!', trigger: 'change'},
                ],
               
            }
        }
    },
    watch:{
        initData(newVal){
            if(newVal){
                this.formData=newVal.data || this.formData
                this.formData.infoType=newVal.tabId
                this.editor.txt.html(newVal.data&&newVal.data.content ||'')
            }
        },
    },
    methods:{
        onSave(){
            var isValidate=false
            this.$refs.formData.validate((bool)=>{
                if(bool){
                    isValidate=true
                }
            })
            if(!isValidate){return}
            if(!this.formData.content){
                this.$message.warning("请输入正文!")
                return
            }
            let submitData=this.formData
            submitData.moduleName="公众号信息"
            this.$http.editNotice(submitData)
            .then((res)=>{
               this.$message.success("保存成功！")
               var initData={...this.initData}
                initData.optType="list"
                initData.data=null
                this.$emit('switchTabComponent',initData)
            }).catch((err)=>{
                
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,查询失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },

        onBack(){
            var to=this.initData.from=='list' ? 'list' :'detail';
            var initData={...this.initData}
            initData.optType=to
            initData.data=initData.data && initData.data.id
            this.$emit('switchTabComponent',initData)
        },
       

        initEditor(content){
            var editor = new WangEditor('#editor')
            editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
            //editor.customConfig.uploadImgServer = uploadPath// 配置服务器端地址
            editor.customConfig.uploadImgHeaders = { }// 自定义 header
            editor.customConfig.uploadFileName = 'files' // 后端接受上传文件的参数名
            editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
            editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
            editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间

            // 配置菜单
            editor.customConfig.menus = [
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'video', // 插入视频
                'code', // 插入代码
                'undo', // 撤销
                'redo', // 重复
                'fullscreen' // 全屏
            ]

            editor.customConfig.onchange = (html) => {
                this.formData.content=html
            }
            editor.customConfig.uploadImgHooks = {
                fail: (xhr, editor, result) => {
                    // 插入图片失败回调
                },
                success: (xhr, editor, result) => {
                    // 图片上传成功回调
                },
                timeout: (xhr, editor) => {
                    // 网络超时的回调
                },
                error: (xhr, editor) => {
                    // 图片上传错误的回调
                },
                customInsert: (insertImg, result, editor) => {
                    // 图片上传成功，插入图片的回调
                    //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
                    // console.log(result.data[0].url)
                    //insertImg()为插入图片的函数
                    //循环插入图片
                    for (let i = 0; i < result.data.length; i++) {
                        var url = result.data[i].url
                        insertImg(url)
                    }
                }
            }
           
            // 创建富文本编辑器
            editor.create()
            this.editor=editor
            
        }
        



    },
    mounted(){
        this.initEditor()
    }
}
</script>
<style scoped lang='scss'>
#edit-notice{
    height: 100%;
    overflow:auto;
    padding:0px 30px;
    .button-bar{
        padding: 10px 30px;
    }

    .w-e-text-container{
        min-height: 450px;
    }

    
}



</style>
<style scoped lang="scss">
//element样式微调
/deep/ .el-form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    .el-form-item{
        margin: 10px;
        margin-left:0px;
         .el-form-item__label{
            white-space: nowrap;
            max-width: 100px;
        }
        .el-input{
            width: 300px;
        }
        #editor{
            margin-top: 10px;
            width: 80%;
            max-width: 1260px;
        }
    }
  
}


</style>



